import React,{useState} from "react";

import "./index.css"

const Image =(props)=>{
    const {src} =props;
    const [www,setwww]= useState(200);
    const clickImg=()=>{
    Promise.resolve().then(()=>{
    let a =  document.querySelector(".bigBox")
    console.log(a);
    a.style.display="block"
    })
    }
    const noClick = ()=>{
        Promise.resolve().then(()=>{
            let a =  document.querySelector(".bigBox")
            console.log(a);
            a.style.display="none"
            })
    }
    const fangDa =(e)=>{
        if(e.deltaY>0){
            setwww(www-20)
        }else{
            setwww(www+20)
        }
    }
    return(
        <>
            <div className="box" onClick={clickImg}>
                <div className="yulan">预览</div>
                <img src={src} alt="看啥" id="immg" />
                
            </div>
            <div className="bigBox" onClick={noClick}  onWheel={fangDa}>
                <img src={src} alt="" width={www*1.2+"px"} height={www+"px"}/>
            </div>
        </>
    )

}
export default Image